<template>
  <div class="login-wrapper">
    <div class="logo"></div>
    <el-form ref="formRef" :model="dataForm" :rules="rules" class="login-form">
      <p class="text">智能电池评估运维示范平台</p>

      <el-form-item prop="username">
        <el-input
          v-model.trim="dataForm.username"
          placeholder="请输入用户名"
          tabindex="1"
          clearable
          type="text"
        >
          <template #prefix>
            <span class="el-icon-user-solid"> </span>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model.trim="dataForm.password"
          placeholder="请输入密码"
          show-password
          tabindex="2"
          clearable
          @keyup.enter="handleLogin"
        >
          <template #prefix>
            <span class="el-icon-unlock"> </span>
          </template>
        </el-input>
      </el-form-item>

      <div style="text-align: center">
        <el-button
          :loading="loading"
          class="login-btn"
          type="primary"
          @click="handleLogin"
        >
          登 录
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ref, toRefs, reactive, defineComponent } from "vue";
import router from "@/router/index.ts";
export default defineComponent({
  setup(props, context) {
    const formRef = ref(null);
    const state = reactive({
      dataForm: {
        username: "",
        password: "",
      },
      loading: false,
      rules: {
        username: [
          { required: true, message: "必填项不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "必填项不可为空", trigger: "blur" },
        ],
      },
    });
    const handleLogin = () => {
      formRef.value.validate((valid) => {
        if (!valid) {
          return;
        }
        router.push("/home");
      });
    };
    return {
      handleLogin,
      formRef,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.login-wrapper {
  position: relative;
  height: 100vh;
  background: linear-gradient(0deg, #0dccff, #2ed9dd);
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  .logo {
    position: absolute;
    top: 32px;
    left: 30px;
    width: 260px;
    height: 60px;
    background: url("~@/assets/login/login-logo.png") no-repeat center;
  }
  .login-form {
    max-width: 600px;
    width: 28%;
    background: #fff;
    padding: 4em;
    border-radius: 4px;
    .text {
      font-family: PingFang SC;
      font-weight: bold;
      text-align: center;
      color: #2cd1d4;
      font-size: 26px;
      margin-bottom: 3em;
    }
    .login-btn {
      width: 50%;
      border-radius: 28px;
      margin-top: 3em;
    }
  }
}
</style>
